<template>
  <div class="map-controls">
    <div class="control-button layer-button" @click="isLayerVisible = !isLayerVisible">
      <svg-icon name="wmc-menu-earth"></svg-icon>
    </div>
    <div class="control-button mode-button" @click="toggle3D" :class="{ 'is-3d': is3D }">
      {{ is3D ? '2D' : '3D' }}
    </div>
    <div class="zoom-group">
      <div class="control-button" @click="toolbarChange('in')">
        <el-icon>
          <Plus />
        </el-icon>
      </div>
      <div class="control-button reset-button" @click="toolbarChange('reset')">
        <el-icon>
          <RefreshRight />
        </el-icon>
      </div>
      <div class="control-button" @click="toolbarChange('out')">
        <el-icon>
          <Minus />
        </el-icon>
      </div>
    </div>

    <Transition name="fade">
      <div v-if="isLayerVisible" class="layer-panel">
        <div class="layer-list">
          <div v-for="layer in layers" :key="layer.id" class="layer-item"
            :class="{ 'is-active': selectedLayer === layer.id }" @click="onSelectLayer(layer.id)">
            <div class="layer-preview">
              <img :src="layer.path" alt="">
            </div>
            <div class="layer-name">{{ layer.name }}</div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'
import { Plus, Minus, Switch, RefreshRight } from '@element-plus/icons-vue'
import { mapApi } from '@/components/cme-mapboxCore/api/mapApi.ts'

interface LayerOption {
  id: string
  name: string,
  path: string
}

const props = defineProps<{
  layers: LayerOption[]
  modelValue?: string
}>()

const selectedLayer = ref<string>(props.modelValue || 'map')
const isLayerVisible = ref(false)
const is3D = ref(true)

function onSelectLayer(id: string) {
  selectedLayer.value = id
  isLayerVisible.value = false
  mapApi.map.changeMapLayer(id)
}

const toolbarChange = (type: string) => {
  if (type === "reset") {
    mapApi.camera.flyToInit()
  } else if (type === 'in') {
    mapApi.camera.zoomIn()
  } else {
    mapApi.camera.zoomOut()
  }
}

function toggle3D() {
  is3D.value = !is3D.value
  mapApi.map.changeMapType(is3D.value ? "3D" : "2D")
}

function handleClickOutside(event: MouseEvent) {
  const container = document.querySelector('.map-controls')
  if (container && !container.contains(event.target as Node)) {
    isLayerVisible.value = false
  }
}

window.addEventListener('click', handleClickOutside)

onBeforeUnmount(() => {
  window.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped lang="scss">
.map-controls {
  position: fixed;
  left: 15px;
  bottom: 65px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: white;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 2px;

  &:hover {
    background: #f5f7fa;

    .el-icon {
      color: #409eff;
    }
  }

  .el-icon {
    font-size: 18px;
    color: #606266;
    transition: color 0.2s ease;
  }
}

.mode-button {
  width: auto;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  border-radius: 15px;
}

.layer-button {
  border-radius: 8px;
}

.zoom-group {
  width: 32px;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  .control-button {
    box-shadow: none;
    border-radius: 0;

    &:not(:last-child) {
      border-bottom: 1px solid #e4e7ed;
    }
  }

  .reset-button {
    background: #f5f7fa;

    &:hover {
      background: #ecf5ff;
    }
  }
}

.layer-panel {
  position: absolute;
  top: 0;
  left: 36px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 6px;
  box-sizing: border-box;
  width: auto;
  height: 65px;
}

.layer-list {
  display: flex;
  flex-direction: row;
  gap: 6px;
  height: 42px;
}

.layer-item {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  width: 58px;
  height: 55px;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    .layer-preview img {
      transform: scale(1.05);
    }

    .layer-name {
      font-size: 12px;
      background: rgba(0, 0, 0, 0.7);
    }
  }

  &.is-active {
    box-shadow: 0 0 0 1px #409eff;

    .layer-name {
      color: #fff;
      background: rgba(64, 158, 255, 0.8);
    }
  }
}

.layer-preview {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.layer-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-5px);
}
</style>